<template>
  <div class="lookForMonth_wrapper">
    <div class="lookForMonth_top">
      <!-- <span @click="dateUp">《</span> -->
      <vue-icon class="jiantou" iconClass="youjiantou" @click="dateUp" id="left"></vue-icon>
      <span>{{ monthEnglish }} {{ year }}</span>
      {{}}
      <!-- <span @click="dateDown">》</span> -->
      <vue-icon class="jiantou" iconClass="youjiantou" @click="dateDown"></vue-icon>
    </div>
    <div class="calendar" :style="calendarStyle">
      <div
        v-for="(item, index) in calendarData"
        class="calendar_item"
        :key="item.id"
        :class="{
          ash: item.color === 'ash',
          date: index > 6 && item.color !== 'ash',
          currentDate: nowYear == item.year && nowMonth == item.month && date == item.label,
        }"
      >
        <p class="dateEdit">
          {{ item.label }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DatePicker',
  data: () => {
    return {
      calendarData: [], //日历循环渲染数据
      year: 0, //当前日期年
      month: 0, //当前日期月数
      date: 0, //当前日期号数
      day: -1, //当前星期几
      nowYear: new Date().getFullYear(),
      nowMonth: new Date().getMonth() + 1,
    };
  },
  computed: {
    // 根据当月日期详情更改日历表格高度
    calendarStyle() {
      if (this.calendarData.length > 42) {
        return 'height: 31vh;';
      } else {
        return 'height: 27vh;';
      }
    },
    monthEnglish() {
      switch (this.month) {
        case 1:
          return 'Jan';
        case 2:
          return 'Feb';
        case 3:
          return 'March';
        case 4:
          return 'Apr';
        case 5:
          return 'May';
        case 6:
          return 'Jun';
        case 7:
          return 'Jul';
        case 8:
          return 'Aug';
        case 9:
          return 'Sep';
        case 10:
          return 'Oct';
        case 11:
          return 'Nov';
        case 12:
          return 'Dec';
      }
    },
  },
  async created() {
    // 获取当前日期数据
    this.getNow();
    // 获取当前月份一号的时间戳
    let firstTime = +new Date(this.year, this.month - 1, 1, 0, 0, 0);
    this.getCalendarDate(); // 给calendarData添加当月数据
  },
  methods: {
    // 获取当前时间
    getNow() {
      let now = new Date();
      this.year = now.getFullYear(); //返回指定Data对象完整年份(四位数年份)
      this.month = now.getMonth() + 1;
      this.date = now.getDate();
      this.day = now.getDay(); //返回在一周中的第几天 0表示周日
    },
    // 获取每个月的天数
    monthDay(month) {
      if ([1, 3, 5, 7, 8, 10, 12].includes(month)) {
        return 31;
      } else if ([4, 6, 9, 11].includes(month)) {
        return 30;
      } else if (month === 2) {
        //  判断当年是否为闰年
        if ((this.year % 4 === 0 && this.year % 100 !== 0) || this.year % 400 === 0) {
          return 29;
        } else {
          return 28;
        }
      }
    },
    // 给calendarData添加当月数据
    getCalendarDate() {
      // 获取当前月份一号星期几
      let firstDay = new Date(this.year + '-' + this.month + '-' + '01').getDay();
      this.calendarData = [
        { label: 'Su', id: '7' },
        { label: 'Mo', id: '1' },
        { label: 'Tu', id: '2' },
        { label: 'We', id: '3' },
        { label: 'Th', id: '4' },
        { label: 'Fr', id: '5' },
        { label: 'Sa', id: '6' },
      ];
      let num = parseInt(firstDay);
      let nowDays = this.monthDay(this.month);
      let lastMonth = this.month - 1 > 0 ? this.month - 1 : 12;
      let nextMonth = this.month + 1 <= 12 ? this.month + 1 : 1;
      let lastDays = this.monthDay(lastMonth);
      //   循环添加上一个月数据
      for (let i = 0; i < num; i++) {
        this.calendarData.push({
          label: lastDays - num + i + 1,
          color: 'ash',
          month: lastMonth,
          year: this.year - 1,
        });
      }
      // 循环添加当月数据
      for (let i = 0; i < nowDays; i++) {
        this.calendarData.push({ label: i + 1, month: this.month, year: this.year });
      }
      // 循环添加下一个月数据
      if (this.calendarData.length % 7 !== 0) {
        let surplusDay = 7 - (this.calendarData.length % 7);
        for (let i = 0; i < surplusDay; i++) {
          this.calendarData.push({
            label: i + 1,
            color: 'ash',
            month: nextMonth,
            year: this.year + 1,
          });
        }
      }
      this.loading = false;
    },
    // 将日期调上
    dateUp() {
      this.month--;
      if (this.month <= 0) {
        this.year--;
        this.month = 12;
      }
      this.getCalendarDate(); // 给calendarData添加当月数据
    },
    // 将日期调下
    dateDown() {
      this.month++;
      if (this.month > 12) {
        this.year++;
        this.month = 1;
      }
      this.getCalendarDate(); // 给calendarData添加当月数据
    },
  },
};
</script>

<style lang="less" scoped>
.lookForMonth_wrapper {
  width: 27vw;
  height: 44vh;
  background-color: rgba(213, 223, 239, 0.1);
  margin: 0 auto;
}

.lookForMonth_top {
  display: flex;
  justify-content: space-between;
  height: 5.2vh;
  line-height: 5.2vh;
  text-align: center;
  font-size: 25px;
  .jiantou {
    position: relative;
    top: 2vh;
    right: 0.5vw;
  }
  #left {
    position: relative;
    transform: rotate(180deg);
    left: 1vw;
  }
}

/* 日历表样式=======================================↓ */
.calendar {
  width: 24vw;
  margin: 0 auto;
  .calendar_item {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    float: left;
    cursor: pointer;
    &.date:hover {
      border-radius: 50%;
      outline: 2px solid #919bbb;
      color: #5729c0;
    }
  }
  .ash {
    color: rgba(163, 177, 198, 1);
  }
  .dateEdit {
    margin-bottom: 10px;
  }
}

.currentDate {
  border-radius: 50%;
  color: white;
  background-color: #4200e6;
}
</style>
